<template>
	<conf-module-container ref="refConfModuleContainer" class="punish-setting-container">
		<template #Slot-Conf-Module-Header>
			<global-svg-icon
				icon-name="return"
				width="18px"
				height="18px"
				class="header-icon"
				style="margin-right: 8px; cursor: pointer"
				@click="toParentPage"
			></global-svg-icon>
			<p class="font-20-bold bread-crumb-title" style="color: #f0f6fc">处罚设置</p>

			<div class="different-punishs">
				<div class="different-punishs-tab" :style="c_ActiveTabStyle(1)" @click="triggerActvie(1)">算法记分处罚规则</div>

				<div class="different-punishs-tab" :style="c_ActiveTabStyle(2)" @click="triggerActvie(2)">
					<span>连带规则</span> <span style="color: #8b949e">（连带对象:管理责任人）</span>
				</div>
			</div>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="container-wrap">
				<div v-show="activeTab === 1" class="_content">
					<div class="font-16-bold header">
						<global-svg-icon icon-name="config-title-tri" width="3px" height="18px" style="margin-right: 16px"></global-svg-icon>
						<div>算法记分处罚规则</div>

						<a-button type="primary" style="margin-left: auto" @click="openDoubble = true">翻倍处罚设置</a-button>
					</div>

					<div class="card-item">
						<div class="punish-item-header">
							<p>处罚规则</p>
							<!-- <a-button type="primary"> 新增 </a-button> -->
						</div>

						<div class="punish-list">
							<div class="punish-list-header">
								<p class="item">算法名称</p>
								<p class="item" style="justify-content: flex-end">记分/分</p>
								<p class="item" style="justify-content: flex-end">罚款金额/元</p>
								<p class="item"></p>
							</div>

							<div style="height: calc(304px - 38px)">
								<div v-if="punishList.length" style="height: 100%">
									<vue-scroll>
										<div
											:key="item.id"
											v-for="(item, inx) in punishList"
											class="punish-list-item"
											@mouseenter="mouseEnter(inx)"
											@mouseleave="mouseLeave"
										>
											<div class="item">{{ item.aiSrvName }}</div>
											<div class="item" style="justify-content: flex-end">{{ item.scope }}</div>
											<div class="item" style="justify-content: flex-end">{{ item.forfeit }}</div>
											<div class="item">
												<div v-show="curInx === inx" class="icons">
													<edit-outlined @click="editFn(item.id)"></edit-outlined>
													<delete-outlined @click="delFn(item.id, item.aiSrvName)"></delete-outlined>
												</div>
											</div>
										</div>
									</vue-scroll>
								</div>

								<div v-else style="display: flex; height: 100%; align-items: center; justify-content: center">
									<img src="../../../../global-assets/imgs/no-punish.png" alt="" style="width: 84px; height: 70px" />
								</div>
							</div>
						</div>

						<!-- <div class="doubble-punish">
							<p>处罚翻倍</p>
							<a-switch v-model:checked="doubblePunish"></a-switch>
						</div> -->
					</div>
				</div>

				<div v-show="activeTab === 2" class="_content">
					<div class="font-16-bold header">
						<global-svg-icon icon-name="config-title-tri" width="3px" height="18px" style="margin-right: 16px"></global-svg-icon>
						<div><span>连带规则</span> <span style="color: #8b949e">（连带对象:管理责任人）</span></div>
					</div>

					<div class="card-item" style="min-height: auto">
						<a-form ref="formRef" layout="vertical" :model="formState">
							<a-form-item label="时间期限" name="timeInterval" style="margin-bottom: 32px">
								<a-select v-model:value="formState.timeInterval" placeholder="请选择时间期限" style="width: 204px">
									<a-select-option :value="0">周</a-select-option>
									<a-select-option :value="1">月</a-select-option>
									<a-select-option :value="2">季度</a-select-option>
									<a-select-option :value="3">年</a-select-option>
								</a-select>
							</a-form-item>

							<a-form-item
								label="累计报警次数"
								name="alarmCount"
								style="margin-bottom: 32px"
								:rules="[{ required: true, message: '请输入累计报警次数', trigger: 'blur' }]"
							>
								<a-input-number v-model:value="formState.alarmCount" :step="1" :min="1" style="width: 204px"></a-input-number>
								<span style="margin-left: 6px; color: #b0b5c0">次</span>
							</a-form-item>

							<a-form-item label="罚款金额" name="forfeit" :rules="[{ required: true, message: '请输入罚款金额', trigger: 'blur' }]">
								<a-input-number v-model:value="formState.forfeit" :step="50" :min="0" style="width: 204px"></a-input-number>
								<span style="margin-left: 6px; color: #b0b5c0">元</span>
							</a-form-item>
						</a-form>

						<!-- <div class="doubble-punish">
							<p>处罚翻倍</p>
							<a-switch v-model:checked="doubblePunish"></a-switch>
						</div> -->
					</div>
				</div>

				<div class="button-group">
					<a-button type="primary" @click="savePunish">{{ activeTab === 1 ? '添加' : '确定' }}</a-button>

					<a-button @click="toParentPage">{{ activeTab === 1 ? '返回' : '取消' }}</a-button>
				</div>
			</div>
		</template>
	</conf-module-container>

	<algorithm-punish :id="selectedId" v-if="showModal" @close="showModal = false" @ok="reloadRules"></algorithm-punish>

	<doubble-punish v-if="openDoubble" @close="openDoubble = false"></doubble-punish>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import httpServe from '@/global-services/index';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { ConfModuleContainer, AlgorithmPunish, DoubblePunish } from '../../components';

const router = useRouter();
const { setOpenDeleteModal } = useDeleteModal();
const toParentPage = () => router.push('/config-manage/punish-manage/table');

const getDobulleInfo = async () => {
	const res: TsRes = await httpServe.getHttp('/base/ruler/doubleliandaipunish/selectRuler?type=2')();
	console.log('getDobulleInfo', res);

	if (res.code === 0) {
		if (!!res.data) {
			formState.value.timeInterval = res.data.timeInterval;
			formState.value.alarmCount = res.data.alarmCount;
			formState.value.type = res.data.type;
			formState.value.id = res.data.id;
			formState.value.forfeit = res.data.forfeit;
		}
	}
};

const activeTab = ref<1 | 2>(1);
const c_ActiveTabStyle = computed(() => {
	return function (type: 1 | 2) {
		return {
			backgroundColor: type === activeTab.value ? 'rgba(240, 246, 252, 0.10)' : 'transparent',
			color: type === activeTab.value ? '#fff' : '#B0B5C0'
		};
	};
});
const triggerActvie = async (type: 1 | 2) => {
	if (activeTab.value === type) {
		return;
	}
	if (type === 2) {
		getDobulleInfo();
	}

	activeTab.value = type;
};

const openDoubble = ref(false);
const showModal = ref(false);
// const doubblePunish = ref(false);
const punishList = ref<any[]>([]); // { id: 1, aiSrvId: '',aiSrvName:'',scope:'',forfeit:'' }
const getPunishList = async () => {
	const res: any = await httpServe.postHttp('/base/ruler/punish/getAllRuler')({});
	if (res.code === 0) {
		punishList.value = Array.isArray(res.data) ? res.data : [];
	}
};

const formRef = ref();
const formState = ref<Record<string, any>>({
	alarmCount: 3, // 告警次数
	timeInterval: 2, // 时间期限 0-周 1-月 2-季 3-年
	forfeit: 200, // 罚款金额
	type: 2 // 1-翻倍处罚 2-连带规则
});

const selectedId = ref();
const curInx = ref(-1);
const mouseEnter = (inx: number) => {
	curInx.value = inx;
};
const mouseLeave = () => {
	curInx.value = -1;
};
const editFn = (id: string | number) => {
	selectedId.value = id;
	showModal.value = true;
};
const delFn = (id: string | number, name: string) => {
	const deleteApi = async () => {
		const res: any = await httpServe.deleteHttp(`/base/ruler/punish/removeById?id=${id}`)();
		if (res.code === 0) {
			message.success('删除成功');
			getPunishList();
		}
	};
	setOpenDeleteModal(deleteApi, {
		title: `请确认是否删除处罚规则：“${name}”？`,
		okText: '删除',
		cancelText: '取消'
	});
};

/** 添加新的处罚 */
const savePunish = () => {
	if (activeTab.value === 1) {
		showModal.value = true;
	} else {
		formRef.value
			.validate()
			.then(async () => {
				const res: any = await httpServe.postHttp('/base/ruler/doubleliandaipunish/saveRuler')(toRaw(formState.value));
				console.log('连带处罚', res);
				if (res.code === 0) {
					message.success('连带处罚设置成功');
					toParentPage();
				}
			})
			.catch((error: any) => {
				console.log('error', error);
			});
	}
};

const reloadRules = () => {
	showModal.value = false;
	getPunishList();
};

onMounted(() => {
	getPunishList();

	getDobulleInfo();
});
</script>

<style lang="less">
.punish-setting-container {
	.container-wrap {
		width: 580px;
		margin: 0 auto;
		padding: 40px 0;
	}

	.ant-input,
	.ant-input-number {
		border: 1px solid @mask02 !important;
		color: @text01 !important;
		background-color: transparent !important;

		&::placeholder {
			color: @text04 !important;
		}
	}

	.ant-input-affix-wrapper {
		background-color: transparent !important;
	}

	.different-punishs {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-left: 32px;

		.different-punishs-tab {
			display: flex;
			height: 30px;
			border-radius: 6px;
			padding: 4px 12px;
			font-size: 14px;
			font-weight: 700;
			font-style: normal;
			line-height: 22px;
			justify-content: center;
			align-items: center;

			&:hover {
				opacity: 0.88;
				cursor: pointer;
			}
		}
	}

	._content {
		margin-bottom: 32px;

		.header {
			display: flex;
			height: 30px;
			margin-bottom: 16px;
			color: #f0f6fc;
			align-items: center;
			gap: 8px;
		}

		.card-item {
			min-height: 456px;
			border: 1px solid#2B3A50;
			border-radius: 4px;
			padding: 20px 20px 40px;
			background-color: #161f31;
			box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);
		}

		.punish-item-header {
			display: flex;
			height: 30px;
			font-size: 14px;
			font-weight: 400;
			font-style: normal;
			line-height: 22px;
			color: #b0b5c0;
			align-items: center;
			justify-content: space-between;
		}

		.punish-list {
			margin-top: 10px;
			border: 1px solid #2b3a50;
			border-radius: 6px;

			.punish-list-header {
				display: grid;
				height: 38px;
				border-bottom: 1px solid #2b3a50;
				font-size: 14px;
				font-weight: 700;
				line-height: 22px;
				color: #8b949e;
				grid-template-columns: 180px 1fr 1.5fr 1fr;
				align-items: center;

				.item {
					display: flex;
					align-items: center;
					height: 100%;
					padding: 2px 16px;
				}
			}

			.punish-list-item {
				display: grid;
				grid-template-columns: 180px 1fr 1.5fr 1fr;
				align-items: center;
				height: 38px;
				border-bottom: 1px solid #2b3a50;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				color: #f0f6fc;

				&:hover {
					background-color: rgba(240, 246, 252, 0.05);
					cursor: pointer;
				}

				.item {
					display: flex;
					align-items: center;
					height: 100%;
					padding: 2px 16px;
				}

				.icons {
					display: flex;
					gap: 10px;
				}
			}
		}

		.doubble-punish {
			display: flex;
			padding-top: 32px;
			color: #b0b5c0;
			gap: 8px;
			align-items: center;

			.ant-switch {
				background-color: #8b949e;
			}

			.ant-switch.ant-switch-checked {
				background-color: #1677ff;
			}
		}
	}

	.button-group {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-bottom: 32px;
	}
}

.add-btn-group {
	.ant-dropdown-menu-item {
		&:hover {
			background-color: rgba(248, 248, 248, 0.2) !important;
		}
	}
}
</style>
